<template>
    <div>
      <Form :label-width="100" ref="formInline" :model="formInline">
        <div v-if="!switchFlag">
          <Row :gutter="16" class="query-form2">
            <i-col span="8">
              <FormItem label="二级集团：">
                <Select v-model="formInline.inspectionNos" multiple>
                  <Option v-for="item in twoLevelGroup" :value="item.orgId">{{ item.orgName }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="被检查单位：">
                <company-select v-model="formInline.inspectionUnitName"></company-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <div style="float: right;">
                <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text">展开
                  <Icon type="ios-arrow-down"/>
                </Button>
              </div>
            </i-col>
          </Row>
        </div>
        <div v-else>
          <Row :gutter="16" class="query-form2">
            <i-col span="8">
              <FormItem label="二级集团：">
                <Select v-model="formInline.inspectionNos" multiple>
                  <Option v-for="item in twoLevelGroup" :value="item.orgId">{{ item.orgName }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="被检查单位：">
                <company-select v-model="formInline.inspectionUnitName"></company-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="检查时间：">
                <DatePicker v-model="formInline.se_date" type="datetimerange" style="width: 100%"
                            format="yyyy-MM-dd" placeholder="请选择上报时间（开始，结束）"></DatePicker>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16" class="query-form2">
            <i-col span="8">
              <FormItem label="检查部位：">
                <Input v-model="formInline.inspectionSite" placeholder="请填写检查部位"/>
              </FormItem>
            </i-col>
            <i-col span="8" >
              <FormItem label="审批状态：" prop='procinstState'>
                <Select v-model="formInline.procinstState" style="width: 100%" clearable>
                  <Option value="0" >未上报</Option>
                  <Option value="1" >审批中</Option>
                  <Option value="2" >被退回</Option>
                  <Option value="3" >审批完成</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="只看本层级：">
                <RadioGroup v-model="formInline.ifSelfUnit">
                  <Radio label="1">是</Radio>
                  <Radio label="2">否</Radio>
                </RadioGroup>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16" class="query-form2">
            <i-col span="8">
              <FormItem label="通知单类型：">
                <Select v-model="formInline.noticeTypeName" style="width: 100%">
                  <Option value="集团级通知单">集团级</Option>
                  <Option value="二级集团级通知单">二级集团级</Option>
                  <Option value="公司级通知单">公司级</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="16">
              <div style="float: right;">
                <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text">收起
                  <Icon type="ios-arrow-up"/>
                </Button>
              </div>
            </i-col>
          </Row>
        </div>
      </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-add" class="ivu-btn-add" @click="addInfo">新增</Button>
            </i-col>
            <i-col>
                <Button icon="md-cloud-download" class="ivu-btn-add" @click="exportExcel">导出</Button>
            </i-col>
        </Row>
        <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns" no-data-text="没有查询到相关数据！" show-summary sum-text="合计" :summary-method="handleSummary" @on-sort-change="querySort"
               :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
        <Row type="flex" justify="end" >
            <i-col>
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>
        <Modal :title="isUpdate? '监督检查隐患整改通知单修改': '监督检查隐患整改通知单新增'" :transfer=false :mask-closable="false" v-model="modal1" :width=1000>
            <div :style="{height: divHeight, overflowY: 'auto', overflowX: 'hidden'}">
                <Form ref="formCustom" :model="formData" :rules="ruleCustom" label-position="top">
                    <Row  :gutter="16">
                        <i-col span="24">
                            <FormItem label="被检查单位：" prop="inspectionUnitName">
                                <Input suffix="ios-search" placeholder="请选择被检查单位" v-model="formData.inspectionUnitName" readonly @on-focus="openOrgModal"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="检查日期：" prop="inspectionDate">
                                <DatePicker type="date" placeholder="请选择" style="width: 100%;"
                                            v-model="formData.inspectionDate"></DatePicker>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="检查部位：">
                                <Input v-model="formData.inspectionSite" placeholder="请输入检查部位" type="text"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16" >
                        <i-col span="24">
                            <FormItem label="检查人员：" prop="inspectionUsers">
                                <Input v-model="formData.inspectionUsers" placeholder="请输入检查人员，用、符号进行分割" type="text"/>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
                <Row type="flex" justify="start" class="query-form" >
                    <i-col>
                        <Button icon="md-add" class="ivu-btn-add" @click="addItemInfo">新增问题</Button>
                        <Button icon="md-cloud-upload" class="ivu-btn-add" @click="openUpload">导入问题</Button>
                        <Button icon="md-download" class="ivu-btn-add" @click="downloadModel">下载模板</Button>
                    </i-col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                    <i-col span="24" style="margin-top: 10px;margin-bottom: 10px">
                        <Table height="300" :loading="loading1" size="small" class="table" no-data-text="没有查询到相关数据!"
                               highlight-row stripe border :columns="columns3" width="100%" :data="apsgNoticeItem">
                        </Table>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <Button  @click="saveInfo" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
                <Button @click="modal1 = false" class="ivu-btn-cancel" >取消</Button>
            </div>
        </Modal>
        <Modal title="公司列表" :transfer=false v-model="modal2" :width=1000 footer-hide>
            <Form :label-width="110" ref="formInline2" :model="formInline2">
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="公司名称">
                            <Input v-model="formInline2.orgName" type="text"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="组织机构级别：">
                            <Select filterable v-model="formInline2.orgLevel"  @on-open-change="selectCodingSort"  >
                                <Option v-for="item in orgLevelList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query" icon="md-search" @click="queryOrg" style="margin-right: 10px">查询</Button>
                            <Button @click="resetOrg" class="ivu-btn-reset">重置</Button>
                        </div>
                    </i-col>
                </Row>
            </Form>
            <Table row-key='orgId' ref='table2' height="400" :loading="loading2" no-data-text="没有查询到相关数据!" border @on-select="selectionTable"
                   :columns="orgColumn" :load-data="handleLoadData" width="100%" :data="orgDatas" size="small">
            </Table>
        </Modal>
        <Modal title="监督检查隐患整改通知单详情" :transfer=false v-model="modal3" :width=1000   @on-cancel="modal3=false" >
            <Row class="modal-view-detail">
                <i-col span="24">
                    <Form :model="formData" :label-width="160">
                        <Row :gutter="16" type="flex" justify="space-around" class="code-row-bg">
                            <i-col span="24">
                                <FormItem label="被检查单位：">
                                    {{formData.inspectionUnitName}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row :gutter="16" type="flex" justify="space-around" class="code-row-bg">
                            <i-col span="12" >
                                <FormItem label="检查日期：">
                                    {{this.formatDate(new Date(this.formData.inspectionDate), 'yyyy-MM-dd')}}
                                </FormItem>
                            </i-col>
                            <i-col span="12" >
                                <FormItem label="检查部位：">
                                    {{formData.inspectionSite}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row :gutter="16" type="flex" justify="space-around" class="code-row-bg">
                            <i-col span="24">
                                <FormItem label="检查人员：">
                                    {{formData.inspectionUsers}}
                                </FormItem>
                            </i-col>
                        </Row>
                    </Form>
                    <Row type="flex" justify="space-around" :gutter="16" class="code-row-bg">
                        <i-col span="24" style="margin-top: 10px;margin-bottom: 10px">
                            <Table height="300" :loading="loading1" size="small"  no-data-text="没有查询到相关数据!"
                                   highlight-row stripe border :columns="columns3" width="100%" :data="apsgNoticeItem">
                            </Table>
                        </i-col>
                    </Row>
                </i-col>
            </Row>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="modal3 = false">关闭</Button>
            </div>
        </Modal>
        <Modal :transfer=false :mask-closable="false" v-model="modal4" :width=700 :title="addItem?'问题新增':'问题修改'"
               @on-cancel="modal4=false;InputItemData={}">
            <div>
                <Form ref='InputItemData' :model="InputItemData" :rules="ruleCustom1" label-position="top">
                    <Row :gutter="16">
                        <i-col span='12' >
                            <FormItem label='隐患归类：'>
                                <Select  filterable v-model="InputItemData.issueCategory" @on-change="changeCategory" disabled>
                                    <Option v-for="item in categoryList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col span='12' >
                            <FormItem label='隐患等级：'>
                                <Select filterable v-model="InputItemData.issueLevel">
                                    <Option v-for="item in levelList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span='12' >
                            <FormItem label='隐患类别：' >
                                <Select v-model="InputItemData.issuePosition" v-if="noticeCategory == 1">
                                    <OptionGroup label="基础管理">
                                        <Option v-for="item in sceneList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                    </OptionGroup>
                                    <OptionGroup label="现场管理">
                                        <Option v-for="item in basicList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                    </OptionGroup>
                                </Select>
                                <Select v-model="InputItemData.issuePosition" v-if="noticeCategory == 2">
                                    <Option v-for="item in environmentProtectionList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col span='12'>
                            <FormItem label='整改期限：' prop="rectifyDate">
                                <DatePicker type="date" v-model="InputItemData.rectifyDate" style="width: 100%"></DatePicker>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span='24' >
                            <FormItem label='整改内容：' prop="itemDesc">
                                <Input v-model="InputItemData.itemDesc" type="textarea"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16" >
                        <i-col span="24">
                            <FormItem label="照片：">
                                <div>
                                    <Upload ref="upload"
                                            :before-upload="beforeUpload"
                                            :show-upload-list="false"
                                            :max-size="10240"
                                            accept="image/jpg, image/jpeg,image/png,image/gif,image/bmp"
                                            multiple
                                            type="drag"
                                            :action="fileUrl">
                                        <div style="padding: 10px">
                                            <Icon type="ios-cloud-upload" size="45" style="color: #F27874"></Icon>
                                            <p>点击将文件拖拽到这里上传</p>
                                            <span style="font-size:8px;color: #797a64">支持扩展名：.jpg，jpeg，png 格式的图片</span>
                                        </div>
                                    </Upload>
                                </div>
                                <p v-if="fileTips" class="img_tips">附件加载中....</p>
                                <div class="demo-upload-list" v-for="(item, index) in uploadList" :key="index">
                                    <template>
                                        <img :src="item.picture">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="viewFile(item.picture)"></Icon>
                                            <Icon type="ios-trash-outline" @click.native="remove2(item)"></Icon>
                                        </div>
                                    </template>
                                </div>
                                <!--                                <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item.id'>-->
                                <!--                                    <a @click="downloadFile(InputItemData.itemId,item)">{{ item.fileName }}</a>-->
                                <!--                                    <Button type="text" icon="md-trash" @click="remove2(item)"-->
                                <!--                                            style="margin-left: 5px;margin-bottom: 3px"/>-->
                                <!--                                </div>-->
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button class='ivu-btn-save' :loading="buttonLoading" @click="submitItem('InputItemData')">确定</Button>
                <Button class='ivu-btn-cancel' @click="modal4=false;InputItemData={}">取消</Button>
            </div>
        </Modal>
        <Modal :transfer=false :mask-closable="false" v-model="modal5"  :width=700 :title="'问题详情'"
               @on-cancel="modal5=false" >
            <div :style="{height: divHeight, overflowY: 'auto', overflowX: 'hidden'}">
                <Form class="modal-view-detail" :model="InputItemData" label-position="top" >
                    <Row :gutter="16">
                        <i-col span='12' >
                            <FormItem label='隐患归类：' >
                                <Select  filterable v-model="InputItemData.issueCategory" disabled>
                                    <Option v-for="item in categoryList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col span='12' >
                            <FormItem label='隐患等级：'>
                                <Select filterable v-model="InputItemData.issueLevel" disabled>
                                    <Option v-for="item in levelList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span='12' >
                            <FormItem label='隐患类别：' >
                                <Select v-model="InputItemData.issuePosition" v-if="noticeCategory == 1" disabled>
                                    <OptionGroup label="基础管理">
                                        <Option v-for="item in sceneList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                    </OptionGroup>
                                    <OptionGroup label="现场管理">
                                        <Option v-for="item in basicList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                    </OptionGroup>
                                </Select>
                                <Select v-model="InputItemData.issuePosition" v-if="noticeCategory == 2" disabled>
                                    <Option v-for="item in environmentProtectionList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col span='12'>
                            <FormItem label='整改期限：' prop="rectifyDate">
                                <DatePicker type="date" v-model="InputItemData.rectifyDate" style="width: 100%" readonly></DatePicker>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span='24'>
                            <FormItem label="整改问题：">
                                <Input v-model="InputItemData.itemDesc" type="textarea" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row class="detail-background-clor" style="line-height: 42px;">
                        <i-col span="23">
                            <FormItem label="问题照片：">
                                <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item'  style="display: inline-block;margin-right: 10px">
                                    <router-link target="_blank" :to="{path:'/imgDetails',query:{id:item.id}}">
                                        <img :src="item.picture" alt="" style="width: 50px;height: 50px;">
                                    </router-link>
                                    <br>
                                    <a @click="downloadFile(form1datacopy.id,item)">{{ item.fileName }}</a>
                                </div>
                                <div v-if="uploadList.length == 0">
                                    附件加载中.....
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span='24'>
                            <FormItem label='问题整改措施：'>
                                <Input v-model="InputItemData.itemMeasures" type="textarea" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row class="detail-background-clor" style="line-height: 42px;">
                        <i-col span="23">
                            <FormItem label="整改照片：">
                                <div v-show="uploadList2.length>0" v-for="item in uploadList2" :key='item'  style="display: inline-block;margin-right: 10px">
                                    <router-link target="_blank" :to="{path:'/imgDetails',query:{id:item.id}}">
                                        <img :src="item.picture" alt="" style="width: 50px;height: 50px;">
                                    </router-link>
                                    <br>
                                    <a @click="downloadFile(form1datacopy.id,item)">{{ item.fileName }}</a>
                                </div>
                                <div v-if="uploadList2.length == 0">
                                    附件加载中.....
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="modal5=false">关闭</Button>
            </div>
        </Modal>
        <Modal :transfer=false v-model="modal6" :width=700 title="监督检查隐患整改通知单上报">
            <Spin fix v-if="spinShow">
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>表单信息加载中，请稍后</div>
            </Spin>
            <Form ref="reportForm" label-position="top" :model="reportData" :rules="ruleCustomReport">
                <!--                <Div v-if="noticeType == 1">-->
                <Row :gutter="16">
                    <i-col span="24" >
                        <FormItem label="集团负责人：" prop="groupLeader">
                            <RadioGroup v-model="reportData.groupLeader" >
                                <Radio v-for="(item, index) in leaderList" :key="index" :label="item.userId" >{{item.userName}}</Radio>
                            </RadioGroup>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16" >
                    <i-col span="24" >
                        <FormItem label="被检查企业：" prop="inspectionUnitName">
                            <Input v-model="reportData.inspectionUnitName" readonly/>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16" >
                    <i-col span="24" >
                        <FormItem label="二级集团负责人：" prop="twoLevelGroupManager">
                            <Select filterable v-model="reportData.twoLevelGroupManager" filterable >
                                <Option v-for="item in twoLevelGroupManagerList" :value="item.userId" :key="item.userId">{{ item.userName + '('+ item.positionName +')' }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16">
                    <i-col span="24">
                        <FormItem label="验收人：" prop="acceptanceUser">
                            <userDom ref="userDom2" :ifUser="true" :selectData="{name: reportData.acceptanceUserName}" @setData="setAcceptanceUser"></userDom>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16">
                    <i-col span="24" >
                        <FormItem label="抄送人：">
                            <userDom ref="userDom" :singleChoice=false :ifUser="true" @setData = "setScreenUserId"></userDom>
                        </FormItem>
                    </i-col>
                </Row>

            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' :loading="buttonLoading" @click="submitReport()">上报</Button>
                <Button class='ivu-btn-cancel' @click="modal6=false;InputItemData={}">取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal7" width="900" :mask-closable="false">
            <Tabs>
                <TabPane label="历史记录">
                    <Table ref='table3' :loading="loading3" border :columns="historyColumns" style="margin-top: 0px"
                           :data="infos3" width="100%" :height="500" highlight-row stripe size="small"></Table>
                </TabPane>
                <TabPane label="流程图">
                    <div style="height: 500px; overflow-y: auto; overflow-x: auto">
                        <img :src="imgUrl" >
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer" >
                <Button @click="modal7=false" class="ivu-btn-save">关闭</Button>
            </div>
        </Modal>
        <Modal v-model="modal8" width="900" footer-hide title="用户列表">
            <Form :label-width="110" ref="formInline3" :model="formInline2">
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="用户名称">
                            <Input v-model="formInline3.userName" type="text"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="公司名称：">
                            <Input v-model="formInline3.orgName" type="text"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query" icon="md-search" @click="queryUser" style="margin-right: 10px">查询</Button>
                            <Button @click="resetUser" class="ivu-btn-reset">重置</Button>
                        </div>
                    </i-col>
                </Row>
            </Form>
            <Table ref='userTable' height="400" :loading="loading4" no-data-text="请选择查询条件!" border
                   :columns="userColumn"  width="100%" :data="userInfos" size="small"></Table>
            <Row type="flex" justify="end" >
                <i-col>
                    <Page :total="pagedata.total2" :current="pagedata.currentPage2" :page-size="pagedata.pageSize2"
                          @on-page-size-change="pageSizeChange2" @on-change="pageChange2" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                </i-col>
            </Row>
        </Modal>
        <Modal title="图片查看" v-model="visible" width="800">
            <img :src="viewUrl" v-if="visible" style="width: 100%">
            <div slot="footer">
                <Button @click="visible=false" class='ivu-btn-save'>关闭</Button>
            </div>
        </Modal>
        <Modal :transfer=false title="批量导入" v-model="modal9" width="800">
            <Form ref="uploadItemData">
                <Row>
                    <i-col span="24">
                        <Upload
                                name="file"
                                type="drag"
                                :format="['xlsx', 'xls']"
                                accept=".xlsx, .xls"
                                :before-upload="handleUpload "
                                action="//jsonplaceholder.typicode.com/posts/">
                            <div style="padding: 20px 0">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>请上传xls、xlsx格式的文件</p>
                            </div>
                        </Upload>
                    </i-col>
                </Row>
                <div v-if="fileTrue">
                    <a>{{ uploadMap.file.name }}</a>
                    <Button type="text" icon="md-trash" @click="uploadMap.file = {},fileTrue = false" style="margin-left: 5px;margin-bottom: 3px"/>
                </div>
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' :loading="buttonLoading" @click="submitFile()">上传</Button>
                <Button @click="modal9 = false" class="ivu-btn-cancel" >取消</Button>
            </div>
        </Modal>
        <Modal :transfer=false title="异常数据，请检查模板" v-model="modal10" width="800">
            <div :style="{height: divHeight, overflowY: 'auto', overflowX: 'hidden'}">
                <Table ref='table3' :loading="loading3" border :columns="errorColumns" style="margin-top: 0px"
                       :data="errorInfos" width="100%" :height="500" highlight-row stripe size="small"></Table>
            </div>
            <div slot="footer">
                <Button class='ivu-btn-cancel' @click="modal10=false;errorInfos=[]">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {Api} from '../../../api'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {formatDate,compressImg} from '@/tools/index'
    import userDom from "@/components/input-user.vue";

    export default {
        name: "fourNotTwoStraightList",
        components: {userDom},
        data(){
            return{
                fileTips: false,
                ifSelfUnit: 1,
                switchFlag : false,
                visible: false,
                viewUrl: '',
                divHeight: '',
                spinShow: false,
                view: false,
                fileUrl: Api.interestedPartiesUserFile,
                addItem: false,
                isUpdate: false,
                modal1: false,
                modal2: false,
                modal3: false,
                modal4: false,
                modal5: false,
                modal6: false,
                modal7: false,
                modal8: false,
                modal9: false,
                modal10: false,
                loading: false,
                loading3: false,
                loading4: false,
                buttonLoading: false,
                loading1: false,
                loading2: false,
                formInline: {
                    se_date: [],
                    ifSelfUnit: '1'
                },
                formInline2: {},
                formInline3: {},
                formData: {},
                ruleCustom: {
                    inspectionUnitName: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    inspectionSite: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    inspectionDate: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change',
                            type: 'date'
                        }
                    ],
                    inspectionUsers: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ]
                },
                ruleCustom1:{
                    issueCategory: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    issueLevel: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    issuePosition: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    rectifyDate: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change',
                            type: 'date'
                        }
                    ],
                    itemDesc: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change',
                        }
                    ]
                },
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                    total2: 0,
                    pageSize2: 10,
                    currentPage2: 1
                },
                pageSizeArray: [10, 20, 50],
                columns: [
                    {
                        title: '序号',
                        width: 80,
                        align: 'center',
                        key: 'index',
                        render: (h, params) => {
                          if (params.row.id == '-1') return h('span', "汇总");
                          return h('span', params.index - 1 + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        minWidth: 100,
                        title: '编号',
                        align: 'center',
                        key: 'inspectionNo',
                    },
                    {
                        minWidth: 150,
                        title: '被检查单位',
                        align: 'center',
                        key: 'inspectionUnitName',
                    },
                    {
                        minWidth: 150,
                        title: '通知单类型',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.id === '-1') {
                              return;
                            }
                            let title = '';
                            if(params.row.noticeType == 1 || params.row.noticeType == null){
                                if(params.row.companyId == '18000000'){
                                    title = '集团级通知单'
                                }else{
                                    title = '二级集团级通知单'
                                }
                            }else{
                                title = '公司级通知单'
                            }
                            return h('div', [
                                h('span',  title)
                            ]);
                        }
                    },
                    {
                        minWidth: 150,
                        title: '检查日期',
                        align: 'center',
                        key: 'inspectionDate',
                        sortable: 'custom',
                        render: (h, params) => {
                            if (params.row.id === '-1') {
                              return;
                            }
                            return h('div', [
                                (this.formatDate(new Date(params.row.inspectionDate), 'yyyy-MM-dd'))
                            ]);
                        }
                    },
                    {
                        minWidth: 150,
                        title: '检查部位',
                        align: 'center',
                        key: 'inspectionSite',
                    },
                    {
                        minWidth: 150,
                        title: '检查人员',
                        align: 'center',
                        key: 'inspectionUsers',
                        tooltip: true
                    },
                    {
                        minWidth: 150,
                        title: '隐患数量',
                        align: 'center',
                        key: 'nums',
                        // render:(h,params)=>{
                        //     return h('div',[
                        //         h('span',  params.row.apsgNoticeItems.length)
                        //     ]);
                        // }
                    },
                    {
                        title: "审批状态",
                        width: 100,
                        align: "center",
                        fixed: 'right',
                        render:(h,params)=>{
                            if (params.row.id === '-1') {
                              return;
                            }
                            return h('div',[
                                h('span', {
                                        style: {
                                            color: params.row.procinstState == '0'? 'red': params.row.procinstState == 1 ? 'green': params.row.procinstState == 2? 'orange': params.row.procinstState == 3? 'blue': 'red'
                                        },
                                    },
                                    params.row.procinstState == '0'? '未上报': params.row.procinstState == 1 ? '审批中': params.row.procinstState == 2? '被退回': params.row.procinstState == 3? '审批完成': '未上报' || '未上报')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 310,
                        render: (h, params) => {
                            if (params.row.id === '-1') {
                              return;
                            }
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.view = true;
                                            this.modal3 = true;
                                            this.updateRow(params.row);
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? '#d0d0d0' : '',
                                        pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                            this.view = false;
                                            this.modal1 = true;
                                            let row = Object.assign({}, params.row);
                                            this.updateRow(row);
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3"? '#d0d0d0' : '',
                                        pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                            this.reportRow(params.row);
                                        }
                                    }
                                }, '上报'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3"? '' : '#d0d0d0',
                                        pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.imgUrl = Api.getFlowImg + '/' + params.row.procinstId;
                                            this.queryHistory(params.row);
                                            this.modal7 = true;
                                        }
                                    }
                                }, '流程图'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3"? '#d0d0d0' : 'red',
                                        pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteRow(params.row);
                                        }
                                    }
                                }, '删除'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.exportItemExcel(params.row);
                                        }
                                    }
                                }, '导出'),
                            ]);
                        }
                    }
                ],
                infos: [],
                columns3: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        minWidth: 120,
                        title: '隐患归类',
                        align: 'center',
                        key: 'issueCategory',
                        render: (h, params) => {
                            let value = '';
                            this.categoryList.forEach(m => {
                                if(m.codingCodeId == params.row.issueCategory){
                                    value = m.codingName;
                                }
                            })
                            return h('span', value)
                        }
                    },
                    {
                        minWidth: 120,
                        title: '隐患等级',
                        align: 'center',
                        key: 'issueLevel',
                        render:(h,params)=>{
                            let value = '';
                            this.levelList.forEach(m => {
                                if(m.codingCodeId == params.row.issueLevel){
                                    value = m.codingName;
                                }
                            })
                            return h('span', value)
                        }
                    },
                    {
                        minWidth: 120,
                        title: '隐患类别',
                        align: 'center',
                        key: 'issuePosition',
                        render:(h,params)=>{
                            let value = '';
                            if(params.row.issueCategory == 'NOT-00003000000001'){
                                this.basicList.forEach(m => {
                                    if(m.codingCodeId == params.row.issuePosition){
                                        value = m.codingName;
                                    }
                                })
                                this.sceneList.forEach(m => {
                                    if(m.codingCodeId == params.row.issuePosition){
                                        value = m.codingName;
                                    }
                                })
                            }else if(params.row.issueCategory == 'NOT-00003000000002'){
                                this.environmentProtectionList.forEach(m => {
                                    if(m.codingCodeId == params.row.issuePosition){
                                        value = m.codingName;
                                    }
                                })
                            }
                            return h('span', value)
                        }
                    },
                    {
                        minWidth: 120,
                        title: '整改期限',
                        align: 'center',
                        key: 'rectifyDate',
                        render:(h,params)=>{
                            return h('div',[
                                h('span', this.formatDate(new Date(params.row.rectifyDate), 'yyyy-MM-dd')   || '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 150,
                        title: '整改问题',
                        align: 'center',
                        key: 'itemDesc',
                    },
                    {
                        minWidth: 150,
                        title: '问题图片',
                        align: 'center',
                        render: (h, params) => {
                            let hfn = [];
                            if(params.row.files!=undefined){
                                params.row.files.forEach(v => {
                                    hfn.push(
                                        h('img', {
                                            style: {
                                                width: "30px",
                                                margin: "3px",
                                                cursor: "pointer"
                                            },
                                            attrs: {
                                                src: v.picture
                                            },
                                            on: {
                                                click: () => {
                                                    this.viewUrl = v.picture;
                                                    this.visible = true;
                                                }
                                            }
                                        })
                                    )
                                });
                            }
                            return h('div', [...hfn]);
                        }
                    },
                    {
                        minWidth: 150,
                        title: '整改措施',
                        align: 'center',
                        key: 'itemMeasures',
                    },
                    {
                        minWidth: 150,
                        title: '整改图片',
                        align: 'center',
                        render: (h, params) => {
                            let hfn = [];
                            if(params.row.files2!=undefined){
                                params.row.files2.forEach(v => {
                                    hfn.push(
                                        h('img', {
                                            style: {
                                                width: "30px",
                                                margin: "3px",
                                                cursor: "pointer"
                                            },
                                            attrs: {
                                                src: Api.uploadPTWFiles + '/file/' + v.id + '?field=measures'
                                            },
                                            on: {
                                                click: () => {
                                                    this.viewUrl = v.picture;
                                                    this.visible = true;
                                                }
                                            }
                                        })
                                    )
                                });
                            }
                            return h('div', [...hfn]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            if(this.view == false){
                                return h('div', [
                                    h('A', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            fontSize: '14px',
                                        },
                                        on: {
                                            click: () => {
                                                this.InputItemData = JSON.parse(JSON.stringify(params.row));
                                                this.getFiles(params.row.itemId);
                                                this.modal5 = true;
                                            }
                                        }
                                    }, '详情'),
                                    h('Divider', {
                                        props: {
                                            type: 'vertical',
                                        }
                                    }, ''),
                                    h('A', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            fontSize: '14px',
                                        },
                                        on: {
                                            click: () => {
                                                this.InputItemData = params.row;
                                                this.ifCategory = params.row.issueCategory;
                                                this.fileTips = true;
                                                this.getFiles(params.row.itemId);
                                                this.index = params.index;
                                                this.modal4 = true;
                                                this.addItem = false;
                                                this.fileUrl = Api.uploadPTWFiles + '/' + this.InputItemData.itemId + '/files/picture/problem';
                                            }
                                        }
                                    }, '修改'),
                                    h('Divider', {
                                        props: {
                                            type: 'vertical',
                                        }
                                    }, ''),
                                    h('A', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            fontSize: '14px',
                                            color: 'red',
                                        },
                                        on: {
                                            click: () => {
                                                this.$Modal.confirm({
                                                    title: '数据删除',
                                                    content: '<p>确定删除该条信息</p>',
                                                    okText: '确认',
                                                    onOk: () => {
                                                        this.apsgNoticeItem.splice(params.index,1);
                                                    },
                                                    cancelText: '取消'
                                                });
                                            }
                                        }
                                    }, '删除'),
                                ]);
                            }else{
                                return h('div', [
                                    h('A', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            fontSize: '14px',
                                        },
                                        on: {
                                            click: () => {
                                                this.InputItemData = JSON.parse(JSON.stringify(params.row));
                                                this.getFiles(params.row.itemId);
                                                this.getFiles2(params.row.itemId);
                                                this.modal5 = true;
                                            }
                                        }
                                    }, '详情'),
                                ]);
                            }
                        }
                    }
                ],
                apsgNoticeItem: [],
                orgColumn:[
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title: '组织机构名称',
                        minWidth: 200,
                        align: 'left',
                        key: 'orgName',
                        tree:true
                    },
                    {
                        title: '组织机构级别',
                        width: 150,
                        align: 'center',
                        key: 'orgLevel',
                        render:(h, params) => {
                            return h('span', this.orgLevelMap[params.row.orgLevel]);
                        }
                    },
                ],
                orgDatas: [],
                tableHeight: '',
                userInfo: {},
                orgLevelMap:{},
                selectRow: {},
                orgLevelList: [],
                uploadList: [],
                uploadList2: [],
                uploadList3: [],
                InputItemData: {},
                reportData: {},
                ruleCustomReport: {
                    groupLeader: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    twoLevelGroupLeader: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    inspectionUnitName: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    companyLeader: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    twoLevelLeaderCC: [
                        {
                            type: 'array',
                            required: true,
                            message: '  ',
                            min: 1,
                            trigger: 'blur, change'
                        }
                    ],
                    twoLevelGroupManager: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                    acceptanceUser: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur, change'
                        }
                    ],
                },
                ifCompany: false,
                leaderList: [],
                companyLeaderList: [],
                twoLevelGroupLeaderList: [],
                imgUrl: '',
                historyColumns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        width: 180,
                        title: '审批时间',
                        key: 'endTime',
                        align: 'center',
                    },
                    {
                        width: 185,
                        title: '节点名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        width: 120,
                        title: '审批人',
                        key: 'userName',
                        align: 'center'
                    },
                    {
                        width: 100,
                        title: '审批意见',
                        key: 'route',
                        align: 'center'
                    },
                    {
                        width: 200,
                        title: '备注',
                        key: 'opinions',
                        align: 'center'
                    },
                ],
                infos3: [],
                index: null,
                isBeforeUpload: false,
                categoryList: [],
                levelList: [],
                positionList: [],
                basicList: [],
                sceneList: [],
                environmentProtectionList: [],
                ifCategory: '',
                userColumn: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '用户名称',
                        key: 'userName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '岗位名称',
                        key: 'positionName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '二级集团',
                        key: 'twoLevelOrgName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '所属公司',
                        key: 'companyName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '所属部门',
                        key: 'orgName',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            if(this.userType == 0){
                                                this.companyLeaderList.push({userId: params.row.userId, userName: params.row.userName});
                                                this.reportData.companyLeader = params.row.userId;
                                            }else if(this.userType == 1){
                                                this.leaderList.push({userId: params.row.userId, userName: params.row.userName});
                                                this.reportData.twoLevelGroupLeader = params.row.userId;
                                            }
                                            this.modal8 = false;
                                        }
                                    }
                                }, '选择')
                            ])
                        }
                    }
                ],
                userInfos: [],
                userType: 0,
                noticeCategory: '',
                fileLoading: {
                    problemSize: 0,
                    measuresSize: 0
                },
                apsgNoticeItem2: [],
                twoLevelGroup: [],
                itemCount: 0,
                noticeType: '',
                fileTrue: false,
                uploadMap: {},
                errorColumns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    // {
                    //     minWidth: 120,
                    //     title: '隐患归类',
                    //     align: 'center',
                    //     key: 'issueCategory',
                    // },
                    {
                        minWidth: 120,
                        title: '隐患等级',
                        align: 'center',
                        key: 'issueLevel',
                    },
                    {
                        minWidth: 120,
                        title: '隐患类别',
                        align: 'center',
                        key: 'issuePosition',
                    },
                    {
                        minWidth: 120,
                        title: '整改期限',
                        align: 'center',
                        key: 'rectifyDate',
                    },
                    {
                        minWidth: 150,
                        title: '整改问题',
                        align: 'center',
                        key: 'itemDesc',
                    }
                ],
                errorInfos: [],
                twoLevelGroupManagerList: [],
                key: null,
                order: null,
            }
        },
        watch: {
            'modal2': function(qw,er){
                if(!qw){
                    this.formInline2.orgName = '';
                    this.formInline2.orgLevel = '';
                }
            },
            'modal1': function (qw,er) {
                if(!qw){
                    this.formData = {};
                    this.apsgNoticeItem = [];
                    this.fileLoading = {
                        problemSize: 0,
                        measuresSize: 0
                    }
                }
            },
            'modal6': function (qw, er) {
                if(!qw){
                    this.companyLeaderList = [];
                    this.leaderList = [];
                    this.reportData = {};
                    this.$refs.userDom.resetCurrentUser();
                }
            },
            'modal4':function(qw, er){
                if(!qw){
                    this.InputItemData = {};
                    this.isBeforeUpload = false;
                    this.uploadList = [];
                }
            },
            'modal5': function (qw, er) {
                if(!qw){
                    this.InputItemData = {};
                    this.isBeforeUpload = false;
                    this.uploadList3 = [];
                    this.uploadList2 = [];
                    this.uploadList = [];
                }
            },
            'modal3': function (qw, er) {
                if(!qw){
                    this.formData = {};
                    this.apsgNoticeItem = [];
                    this.uploadList3 = [];
                    this.uploadList2 = [];
                    this.uploadList = [];
                    this.fileLoading = {
                        problemSize: 0,
                        measuresSize: 0
                    }
                }
            },
            'modal9': function (qw, er) {
                if(!qw){
                    this.errorInfos = [];
                    this.fileTrue= false;
                    this.uploadMap= {};
                }
            },

            visible: function (qw, er) {
                if(!qw){
                    this.viewUrl = '';
                }
            },
            'fileLoading': {
                handler: function (val) {
                    if(val.problemSize == this.apsgNoticeItem2.length && val.measuresSize == this.apsgNoticeItem2.length){
                        this.apsgNoticeItem = this.apsgNoticeItem2;
                        this.loading1 = false;
                    }
                },
                deep: true
            },
            '$route.query.noticeCategory': function () {
                this.noticeCategory = this.$route.query.noticeCategory;
                this.query();
            },
            '$route.query.type': function () {
                this.noticeType = this.$route.query.type;
                this.query();
            }
        },
        mounted(){
            this.noticeCategory = this.$route.query.noticeCategory;
            this.noticeType = this.$route.query.type;
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 185;
            this.userInfo = sessionStorage('userId').getObject('userId');
            this.divHeight = window.innerHeight - 150 +'px';
            this.selectCodingSort();
						// this.formInline.procinstState = '1'
						this.formInline.se_date = [new Date().getFullYear()+'-01-01',new Date()]
            this.query();
        },
        methods: {
            switchQuery(flag){
                this.switchFlag = flag;
                if(this.userInfo.companyId == '18000000'){
                    if(this.switchFlag) {
                        this.tableHeight = this.tableHeight - 74;
                    }else{
                        this.tableHeight = this.tableHeight + 74;
                    }
                }else{
                    if(this.switchFlag) {
                        this.tableHeight = this.tableHeight - 44;
                    }else{
                        this.tableHeight = this.tableHeight + 44;
                    }
                }
            },
            selectCodingSort(){
                this.$http.get(Api.queryCodeDetailBySortId +'/0200100005',{params:{}}).then((res) => {
                    this.orgLevelList = res.data.data;
                    this.orgLevelList.forEach(item=>{
                        this.orgLevelMap[item.codingCodeId] = item.codingName;
                    })
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/NOT-00003', {params: {}}).then((res) => {
                    this.categoryList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/NOT-00001', {params: {}}).then((res) => {
                    this.levelList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/NOT-00002', {params: {}}).then((res) => {
                    this.positionList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySuperiorcode + '/NOT-00007000000001', {params: {}}).then((res) => {
                    this.basicList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySuperiorcode + '/NOT-00007000000004', {params: {}}).then((res) => {
                    this.sceneList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/NOT-00006', {params: {}}).then((res) => {
                    this.environmentProtectionList = res.data.data;
                });
                this.$http.get(Api.companyRectificationNotice + '/twoLevelGroup').then((res) => {
                    if (res.data.status == 200) {
                        if (res.data.data != null) {
                            this.twoLevelGroup = res.data.data;
                        }
                    }
                });
            },
            addInfo(){
                this.view = false;
                this.modal1 = true;
                this.formData.createUserId = this.userInfo.userId;
                this.formData.createOrgId = this.userInfo.orgInfo.orgId;
                this.formData.noticeCategory = this.$route.query.noticeCategory;
                this.formData.id = this.uuid();
                this.isUpdate = false;
            },
            query(){
                this.loading = true;
                let data = {
                    startPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    createOrgId: this.userInfo.companyId,
                    functionType: 2,
                    key: this.key,
                    order: this.order
                };
                if(this.formInline.se_date.length!=0){
                    if(this.formInline.se_date[0] != '') this.formInline.startDate = this.formatDate(new Date(this.formInline.se_date[0]), 'yyyy-MM-dd');
                    if(this.formInline.se_date[1] != '')  this.formInline.endDate = this.formatDate(new Date(this.formInline.se_date[1]), 'yyyy-MM-dd');
                }
                if(this.formInline.inspectionNos != undefined){
                    data.inspectionNo = this.formInline.inspectionNos.toString();
                };

                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.companyRectificationNotice, {
                    params: data
                }).then(function(res){
                  this.infos = res.data.data.data;
                  this.infos.map(m => m.nums = m.apsgNoticeItems.length)
                  let totalNoticeData = this.totalNotice(res.data.data)
                  if (totalNoticeData) {
                    this.infos.unshift(totalNoticeData);
                  }
                  this.itemCount = res.data.data.itemCount;
                  this.pagedata.total = res.data.data.totalSize;
                  this.loading = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            },
            totalNotice(data) {
              let itemCount = data['itemCount'];
              let openCount = data['openCount'];
              if (itemCount || openCount) {
                return {
                  id: '-1',
                  nums: itemCount,
                  openNum: openCount,
                };
              } else {
                return null;
              }
            },
            cancel(){
                this.formInline = {
                    se_date: [],
                    ifSelfUnit: '1'
                };
                this.query();
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            updateRow(row) {
                this.isUpdate = true;
                this.formData = row;
                this.loading1 = true;
                this.$set(this.formData, 'updateUserId', this.userInfo.userId);
                this.$set(this.formData, 'updateOrgId', this.userInfo.orgInfo.orgId);
                this.apsgNoticeItem2 = row.apsgNoticeItems;
                if(this.apsgNoticeItem2.length == 0){
                    this.loading1 = false;
                    return;
                }
                this.apsgNoticeItem2.forEach(v =>{
                    let url = Api.uploadPTWFiles + '/' + v.itemId + '/files/picture'
                    this.$http.get(url, {params: {field : 'problem'}}).then((res) => {
                        if (res.data.result == "success") {
                            v.files = res.data.data
                            this.fileLoading.problemSize++;
                        }
                    }).catch(e => {
                        this.loading1 = false;
                        this.apsgNoticeItem= this.apsgNoticeItem2;
                    })
                    this.$http.get(url, {params: {field: 'measures'}}).then((res) => {
                        if (res.data.result == "success") {
                            v.files2 = res.data.data
                            this.fileLoading.measuresSize++;
                        }
                    }).catch(e => {
                        this.loading1 = false;
                        this.apsgNoticeItem= this.apsgNoticeItem2;
                    })
                });
            },
            saveInfo(){
                this.$refs['formCustom'].validate((valid) => {
                    this.formData.apsgNoticeItems = this.apsgNoticeItem;
                    if(valid){
                        if(this.isUpdate) {
                            this.buttonLoading = true;
                            this.$http.put(Api.companyRectificationNotice, this.formData).then(function(response){
                                this.buttonLoading = false;
                                this.modal1 = false;
                                if(response.data.status == 200){
                                    this.$Message.success({ content: '保存成功', duration: 4 });
                                    this.query();
                                }else{
                                    this.$Message.error({ content: response.data.msg, duration: 4 });
                                }
                            });
                        }else{
                            this.buttonLoading = true;
                            this.$set(this.formData, 'noticeType', this.noticeType);
                            this.$set(this.formData, 'functionType', 2);
                            this.$http.post(Api.companyRectificationNotice, this.formData).then(function(response){
                                this.buttonLoading = false;
                                this.modal1 = false;
                                if(response.data.status == 200){
                                    this.$Message.success({ content: '保存成功', duration: 4 });
                                    this.query();
                                }else{
                                    this.$Message.error({ content: response.data.msg, duration: 4 });
                                }
                            });
                        }
                    }
                });
            },
            deleteRow(row){
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>确定删除该条信息</p>',
                    okText: '确认',
                    onOk: () => {
                        this.$http.delete(Api.companyRectificationNotice, {params:{
                                id: row.id,
                                updateUserId: this.userInfo.userId,
                                updateOrgId: this.userInfo.orgInfo.orgId,
                            }}).then((res) => {
                            this.$Message.success({content:'删除成功',duration: 4});
                            this.query();
                        })
                    },
                    cancelText: '取消'
                });
            },
            reportRow(row){
                this.modal6 = true;
                this.spinShow = true;
                this.reportData = { inspectionUnitName: row.inspectionUnitName, workId: row.id, acceptanceUser: this.userInfo.userId, acceptanceUserName: this.userInfo.userName};
                this.userInfo.companyId == '18000000'? this.ifCompany= true: this.ifCompany = false;
                setTimeout(()=>{
                    this.$refs.userDom2.setCurrentInfo();
                },100)
                this.$http.get(Api.companyRectificationNotice+ '/user', { params: { companyId: this.userInfo.companyId, inspectionUnit: row.inspectionUnit, twoLevelOrgId: this.userInfo.twoLevelOrgId, type: this.noticeType} }).then(function(res){
                    if(res.data.status == 200){
                        this.leaderList = res.data.data.leaderList;
                        this.companyLeaderList = res.data.data.companyLeaderList;
                        this.twoLevelGroupLeaderList = res.data.data.twoLevelLeaderList;
                        this.twoLevelGroupManagerList = res.data.data.twoLevelGroupManager;
                    }
                    this.spinShow = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            },
            openOrgModal(){
                this.modal2 = true;
                this.getOrgInfo();
            },
            viewFile(imgBase64){
                this.visible = true;
                this.viewUrl = imgBase64;
            },
            getOrgInfo(){
                this.$http.get(Api.queryOrgDetailById + "/" + sessionStorage('userId').getObject('userId').companyId).then(res => {
                    this.orgDatas = [];
                    let temp = {};
                    temp._loading = false;
                    temp.children = [];
                    temp.orgName = res.data.data.orgName;
                    temp.orgId = res.data.data.orgId;
                    this.orgDatas.push(temp);
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            handleLoadData (item, callback) {
                setTimeout(() => {
                    this.$http.get(Api.queryOrg, {
                        params: {
                            parentId: item.orgId,
                            codeAffordIf : 0
                        }
                    }).then(res => {
                        if(res.data.data.length !== 0) {
                            res.data.data.map(i => {
                                if(i.orgLevel != '0200100005000000007'){
                                    i._loading = false;
                                    i.children = [];
                                }
                            })
                            item.children = res.data.data;
                            callback(item.children);
                        } else {
                            delete item['_loading'];
                            item.children=[];
                            callback([]);
                        }
                    }).catch(e => {
                        this.$Message.error('请求失败');
                    })
                }, 2000);
            },
            uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for(let i = 0; i < 32; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                let uuid = s.join("");
                return uuid
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
            selectionTable(selection, row){
                // this.$refs.table2.selectAll(true);
                this.$set(this.formData, 'inspectionUnit', row.orgId);
                this.$set(this.formData, 'inspectionUnitName', row.orgName);
                this.modal2 = false;

                // this.selectRow = row;
            },
            queryOrg(){
                this.loading2 = true;
                this.$http.get(Api.queryOrgList+"?orgName="+this.formInline2.orgName+"&fromPage=1&pageSize=1000").then(res => {
                    let datas = [];
                    res.data.data.map(i => {
                        if(i.orgLevel == '13' || i.orgLevel == '12'){
                            return;
                        }
                        if(i.orgLevel != '0200100005000000007'){
                            i._loading = false;
                            i.children = [];
                        }
                        datas.push(i);
                    })
                    this.orgDatas = datas;
                    this.loading2 = false;
                }).catch(e => {
                    this.$Message.error('请求失败');
                    this.loading2 = false;
                })
            },
            resetOrg(){
                this.formInline2.orgName = '';
                this.formInline2.orgLevel = '';
                this.getOrgInfo();
            },
            addItemInfo(){
                this.addItem = true;
                this.uploadList = [];
                this.InputItemData = {
                    itemId: this.uuid(),
                    issueCategory: this.$route.query.noticeCategory == 1? 'NOT-00003000000001': 'NOT-00003000000002',
                    files:[],
                };
                this.fileUrl = Api.uploadPTWFiles + '/' + this.InputItemData.itemId + '/files/picture/problem'
                this.modal4 = true;
            },
            async beforeUpload(file) {
                let index = file.name.lastIndexOf(".");
                let suffix = file.name.substr(index + 1);
                if (suffix != 'jpg' && suffix != 'jpeg' && suffix != 'png') {
                    this.$Message.error("请上传jpg,jpeg,png格式的图片");
                    this.file = null;
                    this.fileName = null;
                } else {
                    let self = this;
                    let keyID = Math.random().toString().substr(2);
                    file['keyID'] = keyID;
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(ev) { //文件读取成功完成时触发
                        file['picture'] = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
                        self.uploadList.push(file);
                    }
                    let formData = new FormData();
                    let compressFile = await compressImg(file);
                    formData.append("files", compressFile); // 文件对象
                    this.$http.post(this.fileUrl, formData).then((res) => {
                        if (res.data.result == "success") {
                            this.isBeforeUpload = true;
                        }
                    })
                }
                return false;
            },
            submitItem(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.addItem){
                            this.apsgNoticeItem.push(this.InputItemData);
                            this.modal4 = false;
                        } else{
                            let index = this.index;
                            this.$set(this.InputItemData, 'files', this.uploadList);
                            this.apsgNoticeItem[index] = JSON.parse(JSON.stringify(this.InputItemData));
                            this.modal4 = false;
                        }
                    }else{
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            submitReport(){
                this.$refs['reportForm'].validate((valid) => {
                    if (valid) {
                        let data ={
                            createUserId: this.userInfo.userId,
                            user1: this.ifCompany? this.reportData.groupLeader: this.reportData.twoLevelGroupLeader,
                            // user2: this.reportData.companyLeader,
                            user2: this.reportData.twoLevelGroupManager,
                            user3: this.reportData.twoLevelLeaderCC !=undefined? this.reportData.twoLevelLeaderCC.toString(): '',
                            nextUserId: this.reportData.acceptanceUser,
                            key: 'companyRectificationNotice',
                            workId: this.reportData.workId,
                            userName: this.userInfo.userName,
                            formKey: 'rectificationNoticeForm',
                            type: '2',
                        }
                        this.buttonLoading = true;
                        this.$http.post(Api.submit, data).then(function(response){
                            this.buttonLoading = false;
                            if(response.data.status == 200){
                                this.sendMessage(data.user1);
                                this.sendUserCC(this.reportData.workId);
                                this.$Message.success({ content: '保存成功', duration: 4 });
                                this.query();
                            }else{
                                this.$Message.error({ content: response.data.msg, duration: 4 });
                            }
                            this.modal6 = false;
                        });
                    }else{
                        this.$Message.error('请将表单填报完整!');
                    }
                });
            },
            getFiles(id) {
                let url = Api.uploadPTWFiles + '/' + id + '/files/picture';
                this.$http.get(url, {params: {field : 'problem'}}).then((res) => {
                    if (res.data.result == "success") {
                        this.fileTips = false;
                        this.uploadList  = res.data.data;
                        if(this.isBeforeUpload){
                            this.InputItemData.files = res.data.data;
                        }
                    }
                })
            },
            getFiles2(id) {
                let url = Api.uploadPTWFiles + '/' + id + '/files/picture';
                this.$http.get(url, {params: {field : 'measures'}}).then((res) => {
                    if (res.data.result == "success") {
                        this.uploadList2  = res.data.data;
                        if(this.isBeforeUpload){
                            this.InputItemData.files2 = res.data.data;
                        }
                    }
                })
            },
            remove1(id,itemId) {
                let url = Api.uploadPTWFiles+ '/file/' + id;
                this.$http.delete(url).then((res) => {
                    this.getFiles(itemId)
                })
            },
            remove2(file) {
                this.uploadList.splice(this.uploadList.indexOf(file), 1);
                if(file.id!=undefined){
                    this.$http.delete(Api.uploadMongoFile + "/" + file.id).then((res) => {
                        this.$Message.info("文件删除成功");
                    })
                }else{
                    this.$Message.info("文件删除成功");
                }
                // let url = this.fileUrl + '/file/' + file.id;
                // this.$http.delete(url).then((res) => {
                //     this.uploadList.splice(this.uploadList.indexOf(file), 1);
                // })
            },
            queryHistory(row){
                this.loading3 = true;
                this.$http.get(Api.getHistory + '/' + row.procinstId, {params: {}}).then((res) => {
                    this.infos3 = res.data;
                    this.loading3 = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            downloadFile(guideId, file) {
                let url = Api.uploadPTWFiles + '/file/' + file.id;
                this.$http.get(url, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            exportExcel(){
                let data = {
                    createOrgId: this.userInfo.companyId,
                    noticeCategory: this.noticeCategory,
                    noticeType: this.noticeType == 2 ? this.noticeType: '',
                    functionType: 1,
                    key: this.key,
                    order: this.order
                };
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.companyRectificationNotice + '/excel',{
                    params: data,
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    })
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = "隐患整改通知单("+ formatDate(new Date(), "yyyy-MM-dd")+ ").xlsx" //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                    this.spinShow = false;
                }, function(res){
                    this.$Message.error('生成失败');
                    this.spinShow = false;
                })
            },
            exportItemExcel(row){
                this.$http.get(Api.companyRectificationNotice + '/item/excel/' + row.id + '/' + row.procinstId, {
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    })
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = "隐患整改通知单("+ formatDate(new Date(), "yyyy-MM-dd")+ ").xlsx" //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                    this.spinShow = false;
                }, function(res){
                    this.$Message.error('生成失败');
                    this.spinShow = false;
                })
            },
            sendMessage(userId){
                let data = {userId: userId, content: "您有一条隐患整改通知单要审批，请登录安全环保信息平台进行审批" };
                this.$http.post(Api.sendMessage ,data);
            },
            changeCategory(id){
                this.$set(this.InputItemData, 'issuePosition', null);
                this.ifCategory = id
            },
            openUserModal(index){
                this.modal8 = true;
                this.userType = index;
                this.queryUser();
            },
            queryUser(){
                let companyId = this.rootOrgId;
                if(companyId == null){
                    companyId = sessionStorage('userId').getObject('userId').companyId
                }
                let data = {
                    fromPage: this.pagedata.currentPage2,
                    pageSize: this.pagedata.pageSize2,
                    companyId : companyId
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline3)));
                this.loading4 = true;
                this.$http.get(Api.queryUser, {
                    params: data
                }).then(res => {
                    res.data.data.map(i => {
                        i.orgName = i.orgInfo.orgName;
                        i.orgId = i.orgInfo.orgId;
                        if(i.position != null){
                            i.positionId = i.position.positionId
                            i.positionName = i.position.positionName
                        }
                    })
                    this.userInfos = res.data.data;
                    this.pagedata.total2 = res.data.total;
                    this.loading4 = false;
                }).catch(e => {
                    this.loading4 = false;
                    this.$Message.error('请求失败');
                })
            },
            pageSizeChange2(pageSize){
                this.pagedata.pageSize2 = pageSize;
                this.queryUser();
            },
            pageChange2(pageNum){
                this.pagedata.currentPage2 = pageNum;
                this.queryUser();
            },
            resetUser(){
                this.formInline3 = {}
                this.queryUser();
            },
            handleSummary({ columns, data }){
                const sums = {};
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (column.title == '序号') {
                        sums[key] = {
                            key,
                            value: '合计'
                        };
                    }else if(column.title == '隐患数量'){
                        sums[key] = {
                            key,
                            value: this.itemCount
                        };
                    }else{
                        sums[key] = {
                            key,
                            value: ''
                        };
                    }
                });
                return sums;
            },
            openUpload(){
                this.modal9 = true;
            },
            handleUpload (file) {
                this.uploadMap.file = file;
                this.fileTrue = true;
                return false;
            },
            submitFile(){
                let formData = new FormData();
                formData.append("file", this.uploadMap.file);
                formData.append("id", this.formData.id);
                formData.append("noticeType", this.$route.query.noticeCategory);
                this.$http.post( Api.companyRectificationNotice + '/upload', formData).then((res) => {
                    if(res.data.status == 201){
                        this.$Message.error(res.data.msg);
                        this.modal10 = true;
                        res.data.data.map((i=>{
                            let cellClassName = {}
                            if(i.issueCategory == null) cellClassName.issueCategory = "table-info-cell-red";
                            if(i.issueLevel == null) cellClassName.issueLevel = "table-info-cell-red";
                            if(i.issuePosition == null) cellClassName.issuePosition = "table-info-cell-red";
                            if(i.rectifyDate == null) cellClassName.rectifyDate = "table-info-cell-red";
                            if(i.itemDesc == null) cellClassName.itemDesc = "table-info-cell-red";
                            i.cellClassName = cellClassName;
                        }));
                        this.errorInfos = res.data.data;
                    }else if(res.data.status == 200){
                        this.$Message.success("批量导入成功");
                        this.modal9 = false;
                        this.queryItem();
                    }
                }).catch(e => {
                    this.$Message.error("导入失败！请检查导入文档的格式是否正确");
                })
            },
            queryItem(){
                this.loading1 = true;
                this.$http.get(Api.companyRectificationNotice+ '/item/' + this.formData.id).then(function(res){
                    this.apsgNoticeItem = res.data.data;
                    this.loading1 = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            },
            downloadModel(){
                this.$http.get(Api.companyRectificationNotice + '/download/model',{
                    params: {
                        type: this.$route.query.noticeCategory
                    },
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    })
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = "隐患整改通知单问题导入模板.xlsx" //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                })
            },
            setScreenUserId(data){
                this.reportData.userCC = data.toString();
            },
            setAcceptanceUser(data){
              this.reportData.acceptanceUser = data.userId;
              this.reportData.acceptanceUserName = data.userName;
            },
            sendUserCC(noticeId){
                let data = {
                    userId: this.reportData.userCC,
                    noticeId: noticeId
                }
                this.$http.get(Api.companyRectificationNotice+ '/user/CC', {
                    params: data
                });
            },
            querySort({column, key, order}){
              this.key = key;
              this.order = order;
              this.query();
            }
        }
    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
        margin-top: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    img_tips {
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
    .table-cell-reservedInstanceCount{
        background-color:#d22828 !important;
        color:#fff;
    }
</style>
